<template>
  <div>
    <div class="common-form">
      <span>{{ curItem.name }}</span>
    </div>
    <el-form size="small" :model="curItem" label-width="100px">
      <div class="f16 gray3 form-subtitle">{{ $t('page.product_data') }}</div>
      <!--商品数量-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.product_count_label') }}</div>
        <el-slider v-model="curItem.params.showNum" size="small" show-input :show-input-controls="false"
          input-size="small"></el-slider>
      </div>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{ $t('page.header_style') }}</div>
      <el-form-item :label="$t('page.title_type_label')">
        <el-radio-group v-model="curItem.style.titleType">
          <el-radio-button :label="1">{{ $t('page.text_only') }}</el-radio-button>
          <el-radio-button :label="2">{{ $t('page.image_only') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--图片-->
      <el-form-item :label="$t('page.title_image_label')" v-if="curItem.style.titleType == 2">
        <div class="diy-special-cover">
          <img style="width: 220px" v-img-url="curItem.style.titleImage" alt=""
            @click="$parent.onEditorSelectImage(curItem.style, 'titleImage')" />
          <!-- <div class="gray9 f12">建议图片高度88px</div> -->
        </div>
      </el-form-item>
      <el-form-item label="简体标题" v-if="curItem.style.titleType == 1"><el-input v-model="curItem.params.title"
          class="w-auto"></el-input></el-form-item>
      <el-form-item label="繁體標題" v-if="curItem.style.titleType == 1"><el-input v-model="curItem.params.titleHk"
          class="w-auto"></el-input></el-form-item>
      <el-form-item label="英文標題" v-if="curItem.style.titleType == 1"><el-input v-model="curItem.params.titleEn"
          class="w-auto"></el-input></el-form-item>
      <!--文字大小-->
      <div class="form-item" v-if="curItem.style.titleType == 1">
        <div class="form-label">{{ $t('page.title_font_size_label') }}</div>
        <el-slider v-model="curItem.style.titleSize" :min="12" :max="24" size="small" show-input
          :show-input-controls="false" input-size="small"></el-slider>
      </div>
      <div class="form-item" v-if="curItem.style.titleType == 1">
        <div class="form-label">{{ $t('page.title_color_label') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.titleColor"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.titleColor" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'titleColor', '#DDDDDD')" type="primary"
            link>{{ $t('page.reset') }}</el-button>
        </div>
      </div>
      <el-form-item :label="$t('page.right_text_zh') + '：'"><el-input v-model="curItem.params.more"
          class="w-auto"></el-input></el-form-item>
      <el-form-item :label="$t('page.right_text_hk') + '：'"><el-input v-model="curItem.params.moreHk"
          class="w-auto"></el-input></el-form-item>
      <el-form-item :label="$t('page.right_text_en') + '：'"><el-input v-model="curItem.params.moreEn"
          class="w-auto"></el-input></el-form-item>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{ $t('page.right_text_style') }}</div>
      <!--文字大小-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.text_size_label') }}</div>
        <el-slider v-model="curItem.style.moreSize" :min="12" :max="40" size="small" show-input
          :show-input-controls="false" input-size="small"></el-slider>
      </div>
      <div class="form-item">
        <div class="form-label">{{ $t('page.text_color_label') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.moreColor"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.moreColor" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'moreColor', '#DDDDDD')" type="primary"
            link>{{ $t('page.reset') }}</el-button>
        </div>
      </div>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{ $t('page.content_display') }}</div>
      <!--商品名称-->
      <el-form-item :label="$t('page.product_name_label')">
        <el-radio-group v-model="curItem.style.productName">
          <el-radio-button :label="1">{{ $t('page.show') }}</el-radio-button>
          <el-radio-button :label="2">{{ $t('page.do_not_display') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--销售价-->
      <el-form-item :label="$t('page.sale_price_label')">
        <el-radio-group v-model="curItem.style.productPrice">
          <el-radio-button :label="1">{{ $t('page.show') }}</el-radio-button>
          <el-radio-button :label="2">{{ $t('page.do_not_display') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--划线价-->
      <el-form-item :label="$t('page.line_price_label')">
        <el-radio-group v-model="curItem.style.productLineprice">
          <el-radio-button :label="1">{{ $t('page.show') }}</el-radio-button>
          <el-radio-button :label="2">{{ $t('page.do_not_display') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--进度条-->
      <el-form-item :label="$t('page.progress_bar')">
        <el-radio-group v-model="curItem.style.productSchedule">
          <el-radio-button :label="1">{{ $t('page.show') }}</el-radio-button>
          <el-radio-button :label="2">{{ $t('page.do_not_display') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <!--进度条-->
      <el-form-item :label="$t('page.button')">
        <el-radio-group v-model="curItem.style.productBtn">
          <el-radio-button :label="1">{{ $t('page.show') }}</el-radio-button>
          <el-radio-button :label="2">{{ $t('page.do_not_display') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{ $t('page.header_style_section') }}</div>
      <el-form-item :label="$t('page.background_image_label')">
        <div class="diy-special-cover">
          <img style="width: 220px" v-img-url="curItem.style.bgimage" alt=""
            @click="$parent.onEditorSelectImage(curItem.style, 'bgimage')" />
          <el-button style="margin-left: 10px" @click.stop="$parent.onEditorResetColor(curItem.style, 'bgimage', '')"
            type="primary" link>{{ $t('page.reset') }}</el-button>
          <div class="gray9 f12"> {{ $t('page.header_image_tip') }}

          </div>
        </div>
      </el-form-item>
      <!-- 时间颜色 -->
      <div class="form-item">
        <div class="form-label">{{ $t('page.number_bg_color') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-input class="ml10" v-model="curItem.style.titleColor1" :placeholder="$t('page.transparent')" />
          <view class="ml10"><el-color-picker size="default" v-model="curItem.style.titleColor1"></el-color-picker>
          </view>
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'titleColor1', '#ffffff')" type="primary"
            link>{{ $t('page.reset') }}</el-button>
        </div>
      </div>
      <!-- 数字颜色 -->
      <div class="form-item">
        <div class="form-label">{{ $t('page.number_color') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.numberColor"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.numberColor" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'numberColor', '#ffffff')" type="primary"
            link>{{ $t('page.reset') }}</el-button>
        </div>
      </div>
      <!-- 文字颜色 -->
      <div class="form-item">
        <div class="form-label">{{ $t('page.text_color_label') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.color"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.color" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'color', '#ffffff')" type="primary"
            link>{{ $t('page.reset') }}</el-button>
        </div>
      </div>
      <!--组件样式-->
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{ $t('page.product_style') }}</div>
      <!--图片圆角-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.image_radius_label') }}</div>
        <el-slider v-model="curItem.style.productImgRadio" size="small" show-input :show-input-controls="false"
          input-size="small"></el-slider>
      </div>
      <div class="form-item">
        <div class="form-label">{{ $t('page.product_bg_label') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.productBg_color"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.productBgColor" :placeholder="$t('page.transparent')" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productBgColor', '')" type="primary"
            link>{{ $t('page.reset') }}</el-button>
        </div>
      </div>
      <!--商品上圆角-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.border_radius_top_label') }}</div>
        <el-slider v-model="curItem.style.productTopRadio" size="small" show-input :show-input-controls="false"
          input-size="small"></el-slider>
      </div>
      <!--商品下圆角-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.border_radius_bottom_label') }}</div>
        <el-slider v-model="curItem.style.productBottomRadio" size="small" show-input :show-input-controls="false"
          input-size="small"></el-slider>
      </div>
      <div class="form-item" v-if="curItem.style.productName">
        <div class="form-label">{{ $t('page.product_name_label') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.productNameColor"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.productNameColor" :placeholder="$t('page.transparent')" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productNameColor', '#333333')" type="primary" link>
            {{ $t('page.reset') }}

          </el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productName">
        <div class="form-label">{{ $t('page.progress_bar') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.productSliderColor"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.productSliderColor" :placeholder="$t('page.transparent')" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productSliderColor', '#FF4C01')" type="primary"
            link> {{ $t('page.reset') }}

          </el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productPrice">
        <div class="form-label">{{ $t('page.sale_price_label') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.productPriceColor"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.productPriceColor" :placeholder="$t('page.transparent')" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productPriceColor', '#FF4C01')" type="primary" link>
            {{ $t('page.reset') }}

          </el-button>
        </div>
      </div>
      <div class="form-item" v-if="curItem.style.productLineprice">
        <div class="form-label">{{ $t('page.line_price_label') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.productLineColor"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.productLineColor" :placeholder="$t('page.transparent')" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'productLineColor', '#999999')" type="primary" link>
            {{ $t('page.reset') }}

          </el-button>
        </div>
      </div>
      <template v-if="curItem.style.productBtn == 1">
        <!--购买按钮-->
        <div class="form-chink"></div>
        <div class="f16 gray3 form-subtitle">{{ $t('page.buy_button') }}</div>
        <el-form-item :label="$t('page.btn_text_zh')"><el-input v-model="curItem.params.btntext"
            class="w-auto"></el-input></el-form-item>
        <el-form-item :label="$t('page.btn_text_hk')"><el-input v-model="curItem.params.btntextHk"
            class="w-auto"></el-input></el-form-item>
        <el-form-item :label="$t('page.btn_text_en')"><el-input v-model="curItem.params.btntextEn"
            class="w-auto"></el-input></el-form-item>
        <div class="form-item">
          <div class="form-label">{{ $t('page.button_color') }}</div>
          <div class="flex-1 d-s-c" style="height: 36px">
            <el-color-picker size="default" v-model="curItem.style.productLineBtnBackground"></el-color-picker>
            <el-input class="ml10" v-model="curItem.style.productLineBtnBackground"
              :placeholder="$t('page.transparent')" />
            <el-button style="margin-left: 10px"
              @click.stop="$parent.onEditorResetColor(curItem.style, 'productLineBtnBackground', '#FF4C01')"
              type="primary" link> {{ $t('page.reset') }}

            </el-button>
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">{{ $t('page.text_color_label') }}</div>
          <div class="flex-1 d-s-c" style="height: 36px">
            <el-color-picker size="default" v-model="curItem.style.productLineBtnColor"></el-color-picker>
            <el-input class="ml10" v-model="curItem.style.productLineBtnColor" :placeholder="$t('page.transparent')" />
            <el-button style="margin-left: 10px"
              @click.stop="$parent.onEditorResetColor(curItem.style, 'productLineBtnColor', '#ffffff')" type="primary"
              link> {{ $t('page.reset') }}

            </el-button>
          </div>
        </div>
        <!--上下边距-->
        <div class="form-item">
          <div class="form-label">{{ $t('page.radius') }}</div>
          <el-slider :max="30" v-model="curItem.style.productLineBtnRadius" size="small" show-input
            :show-input-controls="false" input-size="small"></el-slider>
        </div>
      </template>

      <!--组件样式-->
      <div class="form-chink"></div>
      <div class="f16 gray3 form-subtitle">{{ $t('page.component_style') }}</div>
      <!--上下边距-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.margin_top_label') }}</div>
        <el-slider v-model="curItem.style.paddingTop" size="small" show-input :show-input-controls="false"
          input-size="small"></el-slider>
      </div>
      <!--上下边距-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.margin_bottom_label') }}</div>
        <el-slider v-model="curItem.style.paddingBottom" size="small" show-input :show-input-controls="false"
          input-size="small"></el-slider>
      </div>
      <!--左右边距-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.margin_lr_label') }}</div>
        <el-slider v-model="curItem.style.paddingLeft" size="small" show-input :show-input-controls="false"
          input-size="small"></el-slider>
      </div>
      <!--上圆角-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.border_radius_top_label') }}</div>
        <el-slider v-model="curItem.style.topRadio" size="small" show-input :show-input-controls="false"
          input-size="small"></el-slider>
      </div>
      <!--下圆角-->
      <div class="form-item">
        <div class="form-label">{{ $t('page.border_radius_bottom_label') }}</div>
        <el-slider v-model="curItem.style.bottomRadio" size="small" show-input :show-input-controls="false"
          input-size="small"></el-slider>
      </div>
      <div class="form-item">
        <div class="form-label">{{ $t('page.footer_bg_label') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.bgcolor"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.bgcolor" :placeholder="$t('page.transparent')" />
          <el-button style="margin-left: 10px" @click.stop="$parent.onEditorResetColor(curItem.style, 'bgcolor', '')"
            type="primary" link>{{ $t('page.reset') }}</el-button>
        </div>
      </div>
      <div class="form-item">
        <div class="form-label">{{ $t('page.component_bg_label') }}</div>
        <div class="flex-1 d-s-c" style="height: 36px">
          <el-color-picker size="default" v-model="curItem.style.background"></el-color-picker>
          <el-input class="ml10" v-model="curItem.style.background" :placeholder="$t('page.transparent')" />
          <el-button style="margin-left: 10px"
            @click.stop="$parent.onEditorResetColor(curItem.style, 'background', '#ffffff')" type="primary"
            link>{{ $t('page.reset') }}</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["curItem", "selectedIndex"],
  created() { },
  methods: {
    ResetColor(name1, name2) {
      this.$parent.onEditorResetColor(this.curItem.style, name1, "");
      if (name2) {
        this.$parent.onEditorResetColor(this.curItem.style, name2, "");
      }
    }
  }
};
</script>
